<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 ,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://v3.bootcss.com/dist/css/bootstrap.min.css" />

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        /* .row div {
            border: 1px solid red;
        } */

        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;

        }

        .box p {
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }

        .heart {
            color: pink;
            font-size: 200px;
            transition: 1s all ease;

        }

        .heart:hover {
            font-size: 300px;
            color: red;
        }
    </style>
</head>

<body>

    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          这是一段文字
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
    <!-- <input type="range"> -->
    <div class="progress">
        <div class="progress-bar  progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
          <span>20%</span>
        </div>
      </div>

    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
              </div>
        </div>
    </nav>

    <ul class="nav nav-tabs nav-justified">
        <li role="presentation"><a href="#">Home</a></li>
        <li role="presentation" class="active"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                Dropdown <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>这是一个列表项</li>
              </ul>
        </li>
      </ul>


    <div class="btn-group-vertical" role="group" aria-label="...">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">菜单</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Dropdown link</a></li>
                <li><a href="#">Dropdown link</a></li>
            </ul>
        </div>
    </div>

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
            菜单
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li class="dropdown-header">Dropdown header</li>
            <li><a href="#">HTML</a></li>
            <li class="disabled"><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>

    <span class="heart glyphicon glyphicon-heart" aria-hidden="true"></span>
    <div class="box">
        <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <span class="caret"></span>

        <div class="pull-left">1</div>
        <div class="pull-right">2</div>

        <p class=" center-block">p标签</p>
    </div>
    <div class="container" style="border: 1px solid red;">
        <h1>你好，世界！</h1>
    </div>
    <div class="container-fluid" style="border: 1px solid red;">
        <h1>你好，世界！</h1>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 ">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 ">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 ">1</div>
        </div>
    </div>
    <div class="container">
        <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <a href="#" class="btn btn-default">按钮</a>
            <a href="#" class="btn btn-default">按钮</a>
            <a href="#" class="btn btn-default">按钮</a>
            <a href="#" class="btn btn-default">按钮</a>
        </div>

        <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">Left</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">Left</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">Left</button>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4 col-sm-6">1</div>
            <div class="col-md-4 col-md-offset-4 col-sm-6 ">1</div>
            <div class="col-md-4 col-sm-6 ">1</div>
        </div>
        <div class="row">
            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>
    </div>


    <div class="container">
        <h2>这是标题标签 <small>这是副标题</small></h2>
        <div class="h2">这是div的标题 <span class="small">这是f标题</span></div>
        <p class="lead">
            Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
            montes, <mark>nascetur</mark> ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
        </p>
        <div class="p">
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper
            nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,<del>eget
                lacinia odio sem nec elit.</del> Donec ullamcorper nulla non metus auctor fringilla.
        </div>
        <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget
            metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        <p class="text-right">lacinia odio sem nec elit</p>
        <p class="text-center">lacinia odio sem nec <abbr title="这是一个介绍">elit</abbr></p>
        <p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">Capitalized text.</p>
        <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                For example, <code>&lt;section&gt;</code> should be wrapped as inline.
            </p>
        </blockquote>
        <p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
            To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>


        <pre>
            &lt;p&gt;Sample text here...&lt;/p&gt;
            &lt;section&gt;
        </pre>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                </thead>
                <tbody>
                    <tr class="active">
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                    </tr>
                    <tr class="success">
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                    </tr>
                    <tr class="info">
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                    </tr>
                    <tr class="warning">
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                    </tr>
                    <tr class="danger">
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                        <td>内容1</td>
                        <td>内容2</td>
                        <td>内容3</td>
                    </tr>
                </tbody>
            </table>

            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <div class="form-group has-success has-feedback">

            <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="inputSuccess2Status" class="sr-only">(success)</span>
        </div>

        <div class="form-group has-success has-feedback" style="width: 200px;">
            <div class="input-group">
                <!-- <span class="input-group-addon">@</span> -->
                <input type="text" class="form-control" id="inputGroupSuccess1"
                    aria-describedby="inputGroupSuccess1Status">
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
        </div>

        <a class="btn btn-default active disabled" href="#" role="button">Link</a>
        <button class="btn btn-default btn-block" disabled>按钮</button>

        <div class="row">
            <div class="col-xs-4">
                <img src="./img/1.jpg" class="img-responsive img-rounded" alt="Responsive image">
            </div>
            <div class="col-xs-4">
                <img src="./img/1.jpg" class="img-responsive img-circle" alt="Responsive image">
            </div>
            <div class="col-xs-4">
                <img src="./img/1.jpg" class="img-responsive img-thumbnail" alt="Responsive image">
            </div>
        </div>
    </div>
    <!-- <div class="container">
        <div class="row">
            <div class="col-xs-1">1</div>
            <div class="col-xs-1">2</div>
            <div class="col-xs-1">3</div>
            <div class="col-xs-1">4</div>
            <div class="col-xs-1">5</div>
            <div class="col-xs-1">6</div>
            <div class="col-xs-1">7</div>
            <div class="col-xs-1">8</div>
            <div class="col-xs-1">9</div>
            <div class="col-xs-1">10</div>
            <div class="col-xs-1">11</div>
            <div class="col-xs-1">12</div>
        </div>
        <div class="row">
            <div class="col-sm-1">1</div>
            <div class="col-sm-1">2</div>
            <div class="col-sm-1">3</div>
            <div class="col-sm-1">4</div>
            <div class="col-sm-1">5</div>
            <div class="col-sm-1">6</div>
            <div class="col-sm-1">7</div>
            <div class="col-sm-1">8</div>
            <div class="col-sm-1">9</div>
            <div class="col-sm-1">10</div>
            <div class="col-sm-1">11</div>
            <div class="col-sm-1">12</div>
        </div>
        <div class="row">
            <div class="col-md-1">1</div>
            <div class="col-md-1">2</div>
            <div class="col-md-1">3</div>
            <div class="col-md-1">4</div>
            <div class="col-md-1">5</div>
            <div class="col-md-1">6</div>
            <div class="col-md-1">7</div>
            <div class="col-md-1">8</div>
            <div class="col-md-1">9</div>
            <div class="col-md-1">10</div>
            <div class="col-md-1">11</div>
            <div class="col-md-1">12</div>
        </div>
        <div class="row">
            <div class="col-lg-1">1</div>
            <div class="col-lg-1">2</div>
            <div class="col-lg-1">3</div>
            <div class="col-lg-1">4</div>
            <div class="col-lg-1">5</div>
            <div class="col-lg-1">6</div>
            <div class="col-lg-1">7</div>
            <div class="col-lg-1">8</div>
            <div class="col-lg-1">9</div>
            <div class="col-lg-1">10</div>
            <div class="col-lg-1">11</div>
            <div class="col-lg-1">12</div>
            <div class="col-lg-1">13</div>
        </div>
        <div class="row">
            <div class="col-lg-6">1</div>
            <div class="col-lg-6">2</div>
            <div class="col-lg-4">3</div>
            <div class="col-lg-4">4</div>
            <div class="col-lg-4">5</div>
        </div>
        <div class="row">
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3">3</div>
            <div class="col-md-3">4</div>
        </div>
    </div> -->

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://v3.bootcss.com/dist/js/bootstrap.min.js"></script>
</body>

</html>